<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>润物细无声</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="baidu-site-verification" content="79bZQUEI5o"/>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/stars.css}">
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript" th:src="@{/js/js.cookie.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery.session.js}"></script>
    <script type="text/javascript" th:src="@{/js/onload.js}"></script>
    <script type="text/javascript" th:src="@{/js/utils.js}"></script>
    <script type="text/javascript" th:src="@{/js/up_down.js}"></script>
    <script type="text/javascript" th:src="@{/js/cos_js_sdk_v5.js}"></script>
    <script type="text/javascript" th:src="@{/js/tools.js}"></script>
    <script type="text/javascript" th:src="@{/js/lr.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery.zclip.js}"></script>
    <script type="text/javascript" th:src="@{/js/user.js}"></script>
    <script type="text/javascript" th:src="@{/js/file.js}"></script>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <script type="text/javascript">
        // 禁止鼠标右键
        // document.oncontextmenu = function () {
        //     return false;
        // };
        // //禁止元素被选中
        // if (typeof (document.onselectstart) !== 'undefined') {
        //     // IE chrome下禁止元素被选中
        //     document.onselectstart = function () {
        //         return false;
        //     }
        // } else {
        //     // firefox下禁止元素被选中的变通办法
        //     document.write('<style type="text/css">body { -moz-user-select: none; }</style>');
        // }

    </script>

</head>
<body>


<div id="app">
    <!-- 1680 * 1050 -->
    <el-dialog :title="commonHelp.title" :visible.sync="dialogVisibility.commonHelp" width="30%" center>
        <span v-html="commonHelp.content"></span>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisibility.commonHelp = false" size="small">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog title="文件上传选项" :visible.sync="dialogVisibility.fileUpload" width="40%" center
               :close-on-click-modal="false"
               :close-on-press-escape="false" :destroy-on-close="true">
        <el-form ref="form" :model="form.fileUpload" label-width="80px">

            <el-form-item label="当前选择">
                <span> {{ form.fileUpload.names }}</span>
            </el-form-item>

            <el-form-item label="是否公开">
                <el-switch v-model="form.fileUpload.open" active-color="#13ce66" inactive-color="#CDCDCD">
                </el-switch>
                <label class="item-hint">&emsp;如果不公开，则仅能通过文件编号检索到文件</label>
            </el-form-item>

            <el-form-item label="目标用户">
                <el-select
                        v-model="form.fileUpload.destUserId"
                        filterable
                        remote
                        reserve-keyword
                        placeholder="请输入用户名称关键词"
                        :remote-method="blurSearchUsers"
                        :loading="loading.fileUploadUserSearching">
                    <el-option
                            v-for="item in savedData.userList"
                            v-if="!savedData.isLogin || item.value !== savedData.user.id"

                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <br>
                <label class="item-hint">如果选择了目标用户，则目标用户可以在我的文件中查看到此文件</label>
            </el-form-item>

            <el-form-item label="保存时长">
                <el-select
                        v-model="form.fileUpload.saveDays"
                        reserve-keyword
                        placeholder="请选择文件保存时长">
                    <el-option
                            v-for="item in savedData.saveDays"
                            v-if="item.value != 3650 || savedData.isLogin"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <label class="item-hint">&emsp;单位：天</label>
            </el-form-item>

            <el-form-item label="下载密码">
                <el-input placeholder="如果输入此项，下载文件时将会需要输入此密码" v-model="form.fileUpload.password" cleaable
                          max-length="16"></el-input>
            </el-form-item>

            <el-form-item label="文件备注">
                <el-input type="textarea"
                          :autosize="{ minRows: 2, maxRows: 4}"
                          placeholder="备注内容将会在文件下载时显示"
                          v-model="form.fileUpload.attach">
                </el-input>
            </el-form-item>


        </el-form>
        <div style="display: flex; flex-direction: row-reverse;">
            <el-button type="primary" @click="doUploadFile" :loading="loading.doFileUploadSubmitBtn">确认上传</el-button>
        </div>

    </el-dialog>

    <el-dialog :title="savedData.dialogFile.name" :visible.sync="dialogVisibility.fileDetailDialog" width="35%" center>
        <el-form :model="savedData.dialogFile">
            <div class="file-detail-item-container">
                <span style="font-size: 14px; color: #606266; width: 80px; text-align: right; margin-right: 10px;">
                    文件&emsp;ID</span>
                <span style="font-size: 14px; color: #303133">{{savedData.dialogFile.id}}</span>
            </div>
            <div class="file-detail-item-container">
                <span style="font-size: 14px; color: #606266; width: 80px; text-align: right; margin-right: 10px;">
                    文件编号</span>
                <span style="font-size: 14px; color: #303133">{{savedData.dialogFile.no}}</span>
            </div>
            <div class="file-detail-item-container">
                <span style="font-size: 14px; color: #606266; width: 80px; text-align: right; margin-right: 10px;">
                    文件名称</span>
                <span style="font-size: 14px; color: #303133">{{savedData.dialogFile.name}}</span>
            </div>
            <div class="file-detail-item-container">
                <span style="font-size: 14px; color: #606266; width: 80px; text-align: right; margin-right: 10px;">
                    是否公开</span>
                <span style="font-size: 14px; color: #303133">{{savedData.dialogFile.open ? '是':'否'}}</span>
            </div>
            <div class="file-detail-item-container">
                <span style="font-size: 14px; color: #606266; width: 80px; text-align: right; margin-right: 10px;">
                    文件大小</span>
                <span style="font-size: 14px; color: #303133">{{getFileSizeZh(savedData.dialogFile.size)}}</span>
            </div>
            <div class="file-detail-item-container">
                <span style="font-size: 14px; color: #606266; width: 80px; text-align: right; margin-right: 10px;">
                    需要密码</span>
                <span style="font-size: 14px; color: #CD5C5C"
                      v-if="savedData.dialogFile.password && savedData.dialogFile.password == 'YES'">是</span>
                <span style="font-size: 14px; color: #303133" v-else>否</span>
            </div>
            <div class="file-detail-item-container">
                <span style="font-size: 14px; color: #606266; width: 80px; text-align: right; margin-right: 10px;">
                    保存时长</span>
                <span style="font-size: 14px; color: #303133">{{savedData.dialogFile.saveDays == 3650 ? '永久':
                    savedData.dialogFile.saveDays + ' 天'}}</span>
            </div>
            <div class="file-detail-item-container">
                <span style="font-size: 14px; color: #606266; width: 80px; text-align: right; margin-right: 10px;">
                    上传用户</span>
                <span style="font-size: 14px; color: #303133">{{savedData.dialogFile.user == null ? '[ 匿名用户 ]' : savedData.dialogFile.user.name}}</span>
            </div>
            <div class="file-detail-item-container">
                <span style="font-size: 14px; color: #606266; width: 80px; text-align: right; margin-right: 10px;">
                    创建时间</span>
                <span style="font-size: 14px; color: #303133">{{formatTime(savedData.dialogFile.gmtCreated)}}</span>
            </div>
            <div class="file-detail-item-container">
                <span style="font-size: 14px; color: #606266; width: 80px; text-align: right; margin-right: 10px;">
                    修改时间</span>
                <span style="font-size: 14px; color: #303133">{{formatTime(savedData.dialogFile.gmtModified)}}</span>
            </div>
            <div class="file-detail-item-container">
                <span style="font-size: 14px; color: #606266; width: 80px; text-align: right; margin-right: 10px;">文件备注
                </span>
                <span style="font-size: 14px; color: #303133; white-space: pre-wrap; max-lines: 5;">{{savedData.dialogFile
                    .attach == null ? '无': savedData.dialogFile
                    .attach}}</span>
            </div>


        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="danger" :loading="loading.fileDelete"
                       v-if="savedData.isLogin && savedData.dialogFile.user && savedData.dialogFile.user.id == savedData.user.id"
                       @click="deleteFile(savedData.dialogFile)" plain>删 除
            </el-button>
            <el-button type="success" @click="downloadFile(savedData.dialogFile)" plain>下 载</el-button>
            <el-button type="primary" @click="dialogVisibility.fileDetailDialog = false" plain>关 闭</el-button>
        </div>
    </el-dialog>

    <el-dialog title="文件下载保护" :visible.sync="dialogVisibility.fileDownloadPwdDialog" width="30%"
               :close-on-click-modal="false" :close-on-press-escape="false">
        <el-form>
            <div style="font-size: 14px; color: #606266; margin-bottom: 15px;">文件：[ {{savedData.downloadFile.name}} ]
                受加密保护，请输入密码
            </div>
            <div>
                <el-input placeholder="请输入下载密码" v-model="savedData.downloadFilePassword" show-password></el-input>
            </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="text" plain @click="confirmFileDownload" :loading="loading.checkFilePassword">确认下载
            </el-button>
        </div>
    </el-dialog>

    <el-dialog :title="dialogVisibility.loginDialog? '用户登录': '用户注册'" :visible.sync="dialogVisibility.lrDialog"
               width="30%" :close-on-click-modal="false" :close-on-press-escape="false" center>
        <el-form label-width="60px">
            <template v-if="dialogVisibility.loginDialog">
                <el-form-item label="用户名">
                    <el-input v-model="form.lrForm.name" maxlength="16" clearable placeholder="用户名或邮箱"></el-input>
                </el-form-item>
                <el-form-item label="密&emsp;码">
                    <el-input v-model="form.lrForm.password" maxlength="16" type="password" show-password
                              placeholder="请输入密码"></el-input>
                </el-form-item>
            </template>
            <template v-else>
                <el-form-item label="用户名">
                    <el-input v-model="form.lrForm.name" maxlength="16" clearable placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密&emsp;码">
                    <el-input v-model="form.lrForm.password" maxlength="16" type="password" show-password
                              placeholder="请输入密码"></el-input>
                    <el-input style="margin-top: 10px;" v-model="form.lrForm.password2" maxlength="16" type="password"
                              show-password
                              placeholder="请再输入一遍密码"></el-input>
                </el-form-item>
            </template>
        </el-form>
        <div v-if="dialogVisibility.loginDialog" slot="footer" class="dialog-footer">
            <el-button type="text" plain @click="dialogVisibility.loginDialog = false">去注册
            </el-button>
            <el-button type="text" plain @click="doLogin" :loading="loading.loginLoading">登录
            </el-button>
        </div>
        <div v-else slot="footer" class="dialog-footer">
            <el-button type="text" plain @click="dialogVisibility.loginDialog = true">去登录
            </el-button>
            <el-button type="text" plain @click="doRegister" :loading="loading.loginLoading">注册
            </el-button>
        </div>

    </el-dialog>

    <el-container>
        <el-header>
            <el-menu :default-active="currentActiveIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">
            <span style="text-align: center; display: flex; justify-content: center; align-items: center; height: inherit">
                <el-image style="width: 30px; height: 30px; border-radius: 15px;"
                          src="https://tva1.sinaimg.cn/large/0081Kckwgy1glz5atqfpsj30u00u0jwc.jpg"
                          fit="cover"></el-image>
            </span>
                </el-menu-item>
                <el-submenu index="2">
                    <template slot="title">文件中心</template>
                    <el-menu-item index="2-1">首页</el-menu-item>
                    <el-menu-item index="2-2">使用帮助</el-menu-item>
                </el-submenu>
                <el-submenu v-if="savedData.isLogin" index="6" style="float: right;">
                    <template slot="title"><span style="color: #CDAA7D">欢迎您，{{savedData.user.name}}</span></template>
                    <el-menu-item index="6-1">退出登录</el-menu-item>
                </el-submenu>
                <el-menu-item v-if="!savedData.isLogin" index="7" style="float: right; color: #1E90FF;">登录 / 注册
                </el-menu-item>
            </el-menu>
        </el-header>
        <el-main>
            <div v-if="currentActiveIndex == '2-1' || currentActiveIndex == '2-2' || currentActiveIndex == '6' || currentActiveIndex == '6-1'|| currentActiveIndex == '7'">
                <!--文件视图-->
                <el-container>
                    <el-aside style="width: auto;">
                        <div class="file-header">文件上传</div>
                        <div>
                            <el-upload
                                    drag
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    multiple
                                    ref="fileUpload"
                                    :auto-upload="false"
                                    :http-request="customFileUpload"
                                    :on-remove="onFileUploadListChange"
                                    :on-change="onFileUploadListChange">
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                <div class="el-upload__tip" slot="tip">文件总大小不超过1G</div>
                            </el-upload>
                            <div v-if="dialogVisibility.fileUploadBtn" style="margin-top: 10px;">
                                <el-button type="primary" size="mini" plain @click="displayFileUploadOptDialog(true)">
                                    上传
                                    <i class="el-icon-upload el-icon--right"></i>
                                </el-button>
                            </div>
                        </div>
                        <div class="file-header" style="margin-top: 30px;">我的文件
                            <span v-if="!loading.userFileList" style="color: #0f81cc; cursor: pointer;"
                                  @click="fetchOrResetMyFileList"><i
                                    class="el-icon-refresh"></i>
                            </span>
                            <span v-if="loading.userFileList" style="color: #0f81cc"><i class="el-icon-loading"></i>
                            </span>
                        </div>
                        <div>
                            <div v-if="!savedData.isLogin" style="text-align: center; margin-top: 50px;">
                                <!--没有登录-->
                                <img th:src="@{/img/un-login.png}" style="width: 250px; object-fit: cover;">
                                <div>
                                    <span style="color: #1E90FF; font-size: 13px; margin-top: 20px; cursor: pointer;"
                                          @click="resetAndOpenLoginDialog">登录</span>
                                    <span style="color: #909399; font-size: 13px; margin-top: 20px;">以查看您的文件</span>
                                </div>
                            </div>
                            <div v-else style="text-align: center;">
                                <!--登录了-->
                                <div v-if="!savedData.userFileList || Object.keys(savedData.userFileList).length == 0"
                                     style="text-align: center; margin-top: 50px;">
                                    <!--没有登录-->
                                    <img th:src="@{/img/no-data.png}" style="width: 180px; object-fit: cover;">
                                    <div>
                                        <span style="color: #909399; font-size: 13px; margin-top: 20px;">您还没有上传或收到过文件
                                        </span>
                                    </div>
                                </div>
                                <div v-else>
                                    <div style="text-align: left; max-height: 400px; overflow-y: scroll;">
                                        <el-timeline style="padding-left: 0 !important;">

                                            <template v-for="(fileList, timeStr) in savedData.userTimedFileListMap">
                                                <el-timeline-item :timestamp="timeStr" placement="top">
                                                    <template v-for="file in fileList">
                                                        <div style="margin-bottom: 10px; display: flex;
                                                        justify-items: center; padding: 5px; align-items: center">
                                                        <span v-if="file.user&& savedData.user.id == file.user.id"
                                                              style="margin-right: 5px;">
                                                            <el-tag type="success" size="small">发送</el-tag>
                                                        </span>
                                                            <span v-if="file.destUser && savedData.user.id == file.destUser.id"
                                                                  style="margin-right: 5px;">
                                                            <el-tag type="danger" size="small">接收</el-tag>
                                                        </span>
                                                            <span>
                                                                <img :src="calFilePath(file.name)"
                                                                     style="width: 20px; margin-right: 5px;">
                                                            </span>
                                                            <span style="white-space: nowrap; max-lines: 1;
                                                            overflow: hidden;text-overflow: ellipsis;">
                                                                {{file.name}}</span>
                                                            <span style="margin-left: auto;">
                                                            <el-button type="text" plain size="small"
                                                                       @click="handleDisplayFileDetail(file)">更多
                                                            </el-button>
                                                        </span>
                                                        </div>
                                                    </template>
                                                </el-timeline-item>
                                            </template>
                                        </el-timeline>

                                    </div>
                                    <el-divider></el-divider>

                                    <div style="text-align: left; font-size: 13px; color: #606266">
                                        <div>总计 {{savedData.userFileList.length}} 个文件</div>
                                        <div style="margin-top: 10px;">其中发送 {{savedData.userSentCount}} 个，收到 {{savedData
                                            .userReceivedCount}} 个
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </el-aside>
                    <el-main style="padding-top: 0 !important;">
                        <div class="file-header">公共文件&nbsp;
                            <span v-if="!loading.fileList" style="color: #0f81cc; cursor: pointer;"
                                  @click="refreshFileList"><i
                                    class="el-icon-refresh"></i>
                            </span>
                            <span v-if="loading.fileList" style="color: #0f81cc"><i class="el-icon-loading"></i>
                            </span>
                            <span>
                                <el-input prefix-icon="el-icon-search" placeholder="输入文件名称或编号搜索"
                                          v-model="form.filePageParam.searchKey" @input="blurSearchFile"
                                          clearable style="display: inline-block;margin-top: 15px;">
                            </el-input>
                            </span>

                        </div>
                        <div>
                            <el-row :gutter="10" v-loading="loading.fileList"
                                    style="max-height: 600px; overflow-y: auto;
                                    display: flex; flex-wrap: wrap; flex-direction: row">
                                <template v-for="file in savedData.fileList">
                                    <el-col
                                            :span="form.filePageParam.pageSize == 12 ? 6 : (form.filePageParam.pageSize == 24 ? 6: 4)">
                                        <div style="margin-bottom: 10px;">
                                            <el-card :body-style="{ 'padding-top': '14px' }" shadow="hover">
                                                <div style="display: flex; flex-direction: row; justify-items: center;">
                                                    <span>
                                                        <el-image
                                                                v-if="isImage(file)"
                                                                style="width: 40px; height: 40px; border-radius: 3px;"
                                                                :src="'https://cos.iutr.cn/'+ file.bucketId"
                                                                fix="cover"
                                                                :preview-src-list="['https://cos.iutr.cn/'+ file.bucketId]">
                                                        </el-image>
                                                        <img :src="calFilePath(file.name)" class="file-thumbnail"
                                                             v-else>
                                                    </span>
                                                    <span style="margin-left: 10px; max-lines: 2;
                                                text-overflow: ellipsis;overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2; ">
                                                        <el-tooltip
                                                                effect="dark"
                                                                :content="file.name"
                                                                placement="top-start">
                                                        <span style="font-size: 14px;">{{file.name}}
                                                        </span>
                                                        </el-tooltip>
                                                    </span>
                                                </div>
                                                <div style="padding: 5px 0 0 8px;">
                                                    <div style="font-size: 14px; color: #409EFF"><span
                                                            class="file-info-title">作&emsp;&emsp;者：
                                                    </span>{{file.user == null ? '匿名' : file.user.name}}
                                                    </div>
                                                    <div>
                                                        <span class="file-info-title">文件属性：</span>
                                                        <span v-if="fileHasPassword(file)">
                                                            <el-tag type="danger" size="mini">加密</el-tag>
                                                        </span>
                                                        <span
                                                                v-if="savedData.isLogin && file.user && file.user.id == savedData.user.id">
                                                            <el-tag size="mini">我上传的</el-tag>
                                                        </span>
                                                        <span
                                                                v-if="savedData.isLogin && file.destUser && file.destUser.id == savedData.user.id">
                                                            <el-tag type="success" size="mini">发给我的</el-tag>
                                                        </span>
                                                    </div>
                                                    <div>
                                                        <span class="file-info-title">上传时间：</span>
                                                        <span style="font-size: 14px; margin-top: 5px;">
                                                            {{formatTime(file.gmtCreated)}}</span>
                                                    </div>

                                                    <div class="bottom clearfix">
                                                        <!--                                                        <time class="time">{{ currentDate }}</time>-->
                                                        <!--                                                        <el-button type="text" class="button" v-if="isImage(file)"-->
                                                        <!--                                                                   @click="downloadFile(file)">预览-->
                                                        <!--                                                        </el-button>-->
                                                        <el-button type="text" class="button"
                                                                   @click="downloadFile(file)">下载
                                                        </el-button>
                                                        <el-button type="text" class="button" style="float: right"
                                                                   @click="handleDisplayFileDetail(file)">
                                                            详情
                                                        </el-button>
                                                    </div>
                                                </div>
                                            </el-card>
                                        </div>
                                    </el-col>
                                </template>
                            </el-row>
                        </div>
                        <div style="text-align: center; margin-top: 20px;">
                            <el-pagination
                                    background
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="form.filePageParam.currentPage"
                                    :page-sizes="[12, 24, 48, 120]"
                                    :page-size="form.filePageParam.pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="form.filePageParam.totalSize">
                            </el-pagination>
                        </div>
                    </el-main>
                </el-container>
            </div>
        </el-main>
    </el-container>

    <div class="footer">
        <div class="foot">&copy; 张峥润
        </div>
    </div>

</div>
<script type="text/javascript" th:src="@{/js/my-index.js}"></script>

</body>
</html>